<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      body {
          padding-top: 1.5rem;
      }

      .header {
          width: 93%;
          height: 2.5rem;
          padding: 0.5rem 0.8rem;
          border-bottom: 1px solid rgb(242, 242, 242, 0.5);
          line-height:2.5rem;
          position: fixed;

          background-color: #fff;
      }
      .header_img{
        width: 6%;
        height: 45%;
        float: left;
        margin-top: 0.5rem;
      }
      .header_img img{
        width: 100%;
        height: 100%;
      }
      .header h3{
        width: 77%;
        text-align: center;
        line-height: 3rem;
        margin-left: 0.5rem;
      }
      .fl{
        float: left;
      }
      .fr{
        float: right;
      }
      .p{
          margin-top: 0.2rem;
      }
      .nav{
        width: 88%;
        /*position: fixed;*/
        padding: 1rem;
      margin-top: 4rem;
      }
      .nav p{
        color: #ccc;
      }
      .nav_con{
        width: 5rem;
        border-radius: 0.5rem;
        height: 5rem;

        background-color: rgb(242, 242, 242, 0.5);
        display: flex;

               justify-content: center;

               align-items: center;
      }
      .con_img{
        width: 20%;
        height: 20%;
      }
      .con_img img{
        width: 100%;
        height: 100%;
      }
      .inputs{
        width: 94%;
        height: 20%;
        padding: 1rem;
        overflow-y: scroll;
      }
      textarea{
        border: none;
        background:none;
        outline:none;
        border:1px solid #ccc;
      }
      textarea:focus{
          border:none;
      }
      textarea{resize:none}
      input,button,select,textarea{outline:none}
      .x{
        position: absolute;
        top: 0;
        right:0 ;
        width: 1rem;
        height: 1rem;
      }
      .x img{
        width: 1rem;
        height: 1rem;
      }
      </style>
  </head>
  <body>
    <div class="header">
      <div class="header_img">
        <img src="../icon/zuoduihao.png" alt="" onclick="closewin()">
      </div>
      <h3 class="fl" >写作业</h3>
      <p class="p fr" onclick="adds()">提交</p>
    </div>
    <div class="nav">
      <textarea class="inputs" style="border:none" placeholder="想到什么了，就写下来吧~" id="content"></textarea>
      <!-- <input type="text" class="inputs" value="想到什么了，什么就写下来吧~<"> -->

      <div class="nav_con">
        <div class="con_img" onclick="img_add()">
          <img src="../image/a333.png" alt="">
        </div>
      </div>
      <div id="img_list">


      </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  var userinfo = $api.getStorage('userinfo');
  var content = ''
  var img_list = new Array()
  var id
  apiready = function(){
    id = api.pageParam.id

    if(!userinfo){
      api.openFrame({
          name: 'user_login',
          url: './user_login.html',
          rect: {
              x: 0,
              y: 0,
              w: 'auto',
              h: 'auto'
          }
      });
    }
    api.addEventListener({
        name:'user_register',
        extra:{
            threshold:0
        }
    }, function(ret, err){
        userinfo = $api.getStorage('userinfo');
          //alert( JSON.stringify( ret ) );
    });
    api.addEventListener({
        name:'user_login',
        extra:{
            threshold:0
        }
    }, function(ret, err){
        userinfo = $api.getStorage('userinfo');
          //alert( JSON.stringify( ret ) );
    });

  };
  function adds() {

    api.confirm( {
      title: '提示',
      msg: '提交后不能修改,确认提交?',
      buttons: [ '确定', '取消' ]
    }, function ( ret, err ) {
      var index = ret.buttonIndex;
      if ( index == 1 ) {
        send_posting()
      }
    } )


  }

  function send_posting() {
    if(content=='' && img_list.length<1){
      msgcode('请输入或选择图片')
      return false;
    }
    api.ajax({
        url: SITE_URL+'cur_api/zylist/add_zy',
        method: 'post',
        data: {
            values: {
                content: content,
                user_id:userinfo.id,
                img_list:img_list.join(','),
                chap_id:id

            }
        }
    },function(ret, err){
        if (ret) {
            if(ret.error==200){
              msgcode('提交成功')
              api.sendEvent({
                  name: 'add_zy',
              });
              setTimeout(function () {
                api.closeWin({

                });
              },500)


            }else{
              msgcode('发生错误,请重新提交')
            }
        } else {
          msgcode('请检查网络连接')
            //alert( JSON.stringify( err ) );
        }
    });

  }

  function img_add() {
      var UIMediaScanner = api.require('UIMediaScanner');
      UIMediaScanner.open({
          type: 'picture',
          column: 4,
          classify: false,
          max: 4,
          sort: {
              key: 'time',
              order: 'desc'
          },
          texts: {
              stateText: '已选择*项',
              cancelText: '取消',
              finishText: '完成'
          },
          styles: {
              bg: '#fff',
              mark: {
                  icon: '',
                  position: 'bottom_left',
                  size: 20
              },
              nav: {
                  bg: '#eee',
                  stateColor: '#000',
                  stateSize: 18,
                  cancelBg: 'rgba(0,0,0,0)',
                  cancelColor: '#000',
                  cancelSize: 18,
                  finishBg: 'rgba(0,0,0,0)',
                  finishColor: '#000',
                  finishSize: 18
              }
          },
          scrollToBottom: {
              intervalTime: 3,
              anim: true
          },
          exchange: true,
          rotation: true
      }, function(ret) {
          if (ret) {
            if(ret.list){
              if(ret.list.length>0){
                api.showProgress({
                    style: 'default',
                    animationType: 'fade',
                    title: '努力加载中...',
                    text: '先喝杯茶...',
                    modal: false
                });

                for (var i = 0; i < ret.list.length; i++) {
                  var dat = ret.list[i]
                  saveImg(dat.path)
                  if(i+1 == ret.list.length){//全部储存完毕
                    setTimeout(function () {//为了防止异步加载，延迟1秒展示图片
                        api.hideProgress();
                    }, 1000);
                  }
                }
              }
            }else{
              msgcode('取消选择')
            }
              //alert(JSON.stringify(ret));
          }
      });
  }


  function saveImg(path) {
    var img_url = path

  // 创建对象
  var img = new Image()

  // 改变图片的src
  img.src = img_url

  // 打印
  img.onload = function(){
    // 打印
    // alert('width:'+img.width+',height:'+img.height)
    var demo = api.require('imageOptim');
    demo.compress({ quality: 0.1, width: img.width, height: img.height, imgPath: path }, function (ret, err) {
        if (ret) {
          sav(ret.imgPath)
          //  alert(JSON.stringify(ret))
        } else {
          msgcode('压缩失败')
            //alert(JSON.stringify(err))
        }
    });
  }


//
//
//     var html =''
//     var obj = $api.byId('img_list');
//     api.ajax({
//         url: SITE_URL+'square_api/fileservice/posting_img',
//         method: 'post',
//         data: {
//             files: {
//                 image: path
//             }
//         }
//     },function(ret, err){
//         if (ret) {
//           if(ret.error==200){
//             img_list.push(ret.data)
//             var b = img_list.length - 1
//             html +='<div style="position:relative;width:6rem;height:6rem;float:left;margin-right:0.5rem" id="list'+b+'">'
//             html +='<img src="'+ret.data+'" style="width:6rem;height:6rem">'
//             html +='<span class="x" onclick="delimg(this,'+b+')"><img src="../icon/del.png"></span>'
//             html +='</div>'
//
//             $api.append(obj, html);
//
//           }
// //            alert( JSON.stringify( ret ) );
//         } else {
//           msgcode('上传失败1张图片')
//             //alert( JSON.stringify( err ) );
//         }
//     });

  }

  function sav(path) {
        var html =''
        var obj = $api.byId('img_list');
        api.ajax({
            url: SITE_URL+'square_api/fileservice/posting_img',
            method: 'post',
            data: {
                files: {
                    image: path
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                img_list.push(ret.data)
                var b = img_list.length - 1
                html +='<div style="position:relative;width:6rem;height:6rem;float:left;margin-right:0.5rem" id="list'+b+'">'
                html +='<img src="'+ret.data+'" style="width:6rem;height:6rem">'
                html +='<span class="x" onclick="delimg(this,'+b+')"><img src="../icon/del.png"></span>'
                html +='</div>'

                $api.append(obj, html);

              }
    //            alert( JSON.stringify( ret ) );
            } else {
              msgcode('上传失败1张图片')
                //alert( JSON.stringify( err ) );
            }
        });
  }
  function delimg(self,keys) {
    img_list.splice(keys,1);
    $("#list"+keys).remove()

  }
  $('#content').bind('input propertychange', function(){
    var con_value = $("#content").val();
    content = con_value
    console.log(content)
  });
  </script>
  </html>
